import React, { FC, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { ConnectProps, ConnectState } from 'typings/connect';
import { MyStatus, TabIds } from './constants';
import Detail from './content';
import { IApprovalDetail } from './content';
import { IApprovalItem } from './type';
import createDOMForm from '@/components/rc-form/createDOMForm';
import emptyImg from '@/assets/approval/dafult-404.png';
import styles from './index.module.less';

const FormDetail = createDOMForm({} as IApprovalDetail)(Detail);

interface IApprovalPage extends ConnectProps {
  myStatus: MyStatus;
  loading?: boolean;
  effectKey: string;
  location?: any;
}

// 审批业务首页
const ApprovalPage: FC<IApprovalPage> = (props) => {
  const [currentTask, setCurrentTask] = useState<IApprovalItem>();
  const [srvTime, setSrvTime] = useState<IApprovalItem>();
  const [otherHandled, setOtherHandled] = useState(false);
  useEffect(() => {
    document.title = '审批详情';
    pageInit();
  }, []);

  const pageInit = () => {
    if (
      props.location.query?.procNo &&
      props.location.query?.taskDefKey &&
      props.dispatch &&
      props.location.query?.tabId == TabIds.ToApproval
    ) {
      props
        .dispatch({
          type: 'capproval/getTaskHandler',
          payload: {
            procNo: props.location.query?.procNo,
            defKey: props.location.query?.taskDefKey
          }
        })
        .then(async (res?: any) => {
          // procStatus流程状态( 1审批中 2已完成  3已拒绝 4已撤销)
          // isHandled( 1本人处理过  0未处理过 )
          // isCanHandled( 1能被处理 0不能被处理 )
          // if (res.data?.isHandled == 1 && res.data?.isCanHandled != 1) {
          // 申请已被自己处理
          //   getDetails();
          // }
          // else
          if (res.data?.isCanHandled == 0 && res.data?.isHandled == 0) {
            //该申请已被他人处理！
            setOtherHandled(true);
          } else {
            setOtherHandled(false);
            getDetails();
          }
        });
    } else {
      getDetails();
    }
  };

  const getDetails = () => {
    const activeKey = props.location?.query?.tabId || undefined;
    const recordId = props.location?.query?.recordId || undefined;
    const type =
      activeKey === TabIds.MyApply
        ? 'capproval/getProcDetail'
        : 'capproval/getTaskDetail';
    const payload =
      activeKey === TabIds.MyApply
        ? { procRecordId: recordId }
        : { taskRecordId: recordId };
    props.dispatch &&
      props
        .dispatch({
          type: type,
          payload: payload
        })
        .then((res: any) => {
          setCurrentTask(res.data);
          setSrvTime(res.srvTime);
        });
  };

  let myStatus;
  const activeKeyG = props.location?.query?.tabId || undefined;
  const recordIdG = props.location?.query?.recordId || undefined;
  if (activeKeyG === TabIds.MyApply) {
    myStatus = MyStatus.MyApply;
  } else {
    if (activeKeyG === TabIds.ToApproval) {
      myStatus = MyStatus.ToApproval;
    } else if (activeKeyG === TabIds.Approvaled) {
      myStatus = MyStatus.Approvaled;
    } else if (activeKeyG === TabIds.CopyToMe) {
      myStatus = MyStatus.CopyToMe;
    }
  }

  if (otherHandled)
    return (
      <div className={styles.emptyWrap}>
        <img
          src={emptyImg}
          className={styles.emptyImg}
          alt="该申请已被他人处理"
        />
        <span className={styles.emptyText}>该申请已被他人处理</span>
      </div>
    );

  if (!currentTask) return null;

  return (
    <>
      {myStatus === MyStatus.ToApproval ? (
        <FormDetail
          key={currentTask?.uid}
          task={currentTask}
          myStatus={myStatus}
          recordId={recordIdG}
          srvTime={srvTime}
          onRefreshStatus={getDetails}
        />
      )
        :
        (
          <Detail
            key={currentTask?.uid}
            task={currentTask}
            myStatus={myStatus}
            recordId={recordIdG}
            srvTime={srvTime}
            onRefreshStatus={getDetails}
          />
        )
      }
    </>
  );
};

export default connect(({ loading }: ConnectState, props: IApprovalPage) => {
  return {
    loading: loading.effects[props.effectKey]
  };
})(ApprovalPage);
